<template>
  <view class="calander-picker">
    <view class="option-bar">
      <img src="@image/index/close.png"
           class="option-icon"
           @click="$emit('closeCalander',false)">
      <view class="option-title">选择时间段</view>
      <img src="@image/index/yes.png"
           class="option-icon"
           @click="sendRangDate">
    </view>
    <view class="warining">
      <img src="@image/upload/warning.png"
           class="warnning-icon"><text>只能选择近一年内的时间范围</text>
    </view>
    <view class="select-day">
      <view class="start">
        <text>开始</text><text class="time-word">{{startDayWrod}}</text>
      </view>
      <view class="end">
        <text class="time-word">{{endDayWrod}}</text><text>结束</text>
      </view>
    </view>
    <view class="year">
      <!-- <view >pre</view> -->
      <view class="fake-btn"
            style="justify-content: flex-end;"
            @click="getYear(0)"> <img src="@/assets/img/index/icon_prev.png"
             class="go-icon" /></view>

      <view>{{year}}</view>
      <view class="fake-btn"
            style="justify-content: flex-start;"
            @click="getYear(1)"> <img src="@/assets/img/index/icon_next.png"
             class="go-icon" /></view>
      <!-- <view @click="getYear(1)">next</view> -->
    </view>
    <view class="week">
      <view class="week-day"
            v-for="(item, i) in week"
            :key="i">
        {{item}}</view>
    </view>
    <scroll-view scroll-y="true"
                 :scroll-into-view="domId"
                 class="calander-center">
      <view class="month"
            :id="`month${i+1}`"
            v-for="(item, i) in thisYearDate"
            :key="i">
        <view class="before-day"
              v-for="(sitem, si) in item.firstDay"
              :key="si"></view>
        <view v-for="(dayitem, dayi) in item.date.day"
              :key="dayi"
              class="date">
          <view v-if="dayi===0"
                class="month-number"
                :style="{'color': item.month===month?'#0046D2':'000'}">{{item.month}}月</view>
          <view @click="selectDay(dayitem.value, dayitem.word)"
                :data-date="dayitem.value"
                :class="(startDay==dayitem.value)&&endDay==''?'start-day only-start date-number':(startDay==dayitem.value)&&endDay!=''?'date-number start-day':endDay==dayitem.value?'date-number end-day':(startDay!==''&&endDay!==''&&startDay<dayitem.value&&dayitem.value<endDay)?'date-number main-day':'date-number'">
            <view>{{dayitem.day}}</view>
            <!-- <view style="font-size: 20rpx;">{{dayitem.nl}}</view> -->
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  data () {
    return {
      week: ['日', '一', '二', '三', '四', '五', '六'],
      // alldays: 0,
      year: 0,
      // thisMounthFirstDay: 0, // 获取这个月第一天是星期几X(0-6,0代表星期天)
      // thisMounthDays: 0, // 获得是标准时间,需要getDate()获得天数
      startTime: '',
      endTime: '',
      month: 0,
      domId: '',
      thisYearDate: [],
      startDay: '', // 开始日期的时间戳
      startDayWrod: '', // 开始日期的时间戳
      endDayWrod: '', // 结束日期的时间戳
      endDay: '', // 结束日期的时间戳
      getnongli: {
        //======农历信息
        lunarinfo: new Array(0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,
          0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,
          0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,
          0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,
          0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557,
          0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0,
          0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,
          0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 0x195a6,
          0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570,
          0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0,
          0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5,
          0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930,
          0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530,
          0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45,
          0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0),

        //==== 传回农历 y年的总天数    
        lyeardays: function (y) {
          var i, sum = 348
          for (i = 0x8000; i > 0x8; i >>= 1) sum += (this.lunarinfo[y - 1900] & i) ? 1 : 0
          return (sum + this.leapdays(y))
        },
        //==== 传回农历 y年闰月的天数    
        leapdays: function (y) {
          if (this.leapmonth(y)) return ((this.lunarinfo[y - 1900] & 0x10000) ? 30 : 29)
          else return (0)
        },
        //==== 传回农历 y年闰哪个月 1-12 , 没闰传回 0    
        leapmonth: function (y) { return (this.lunarinfo[y - 1900] & 0xf) },
        //====================================== 传回农历 y年m月的总天数    
        monthdays: function (y, m) { return ((this.lunarinfo[y - 1900] & (0x10000 >> m)) ? 30 : 29) },
        //==== 算出农历, 传入日期物件, 传回农历日期物件    
        //该物件属性有 .year .month .day .isleap .yearcyl .daycyl .moncyl    
        lunar: function (objdate) {
          var i, leap = 0, temp = 0;
          var basedate = new Date(1900, 0, 31);
          var offset = (objdate - basedate) / 86400000;
          this.daycyl = offset + 40;
          this.moncyl = 14;
          for (i = 1900; i < 2050 && offset > 0; i++) {
            temp = this.lyeardays(i);
            offset -= temp;
            this.moncyl += 12;
          }
          if (offset < 0) {
            offset += temp;
            i--;
            this.moncyl -= 12;
          }
          this.year = i;
          this.yearcyl = i - 1864;
          leap = this.leapmonth(i); //闰哪个月    
          this.isleap = false
          for (i = 1; i < 13 && offset > 0; i++) {
            //闰月    
            if (leap > 0 && i == (leap + 1) && this.isleap == false) { --i; this.isleap = true; temp = this.leapdays(this.year); }
            else { temp = this.monthdays(this.year, i); }
            //解除闰月    
            if (this.isleap == true && i == (leap + 1)) this.isleap = false
            offset -= temp
            if (this.isleap == false) this.moncyl++
          }
          if (offset == 0 && leap > 0 && i == leap + 1)
            if (this.isleap) { this.isleap = false; }
            else { this.isleap = true; --i; --this.moncyl; }
          if (offset < 0) { offset += temp; --i; --this.moncyl; }
          this.month = i
          this.day = offset + 1
          return { month: this.month, day: this.day };
        },
        cday: function (m, d) {
          var nstr1 = new Array('日', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十');
          var nstr2 = new Array('初', '十', '廿', '卅', '　');
          var s = ''
          // if (m > 10) { s = '十' + nstr1[m - 10] } else { s = nstr1[m] } s += '月'
          // if (s == "十二月") s = "腊月";
          // if (s == "一月") s = "正月";
          // console.log(d)
          // switch (d) {
          //   case 10: s += '初十'; break;
          //   case 20: s += '二十'; break;
          //   case 30: s += '三十'; break;
          //   default: 
          // }
          s += nstr2[Math.floor(d / 10)];
          s += nstr1[parseInt(d) % 10];
          return (s);
        },
        solarday: function (nowdate) {
          var tt = "";
          if (nowdate instanceof Date) {
            var sdobj = new Date(nowdate.getFullYear(), nowdate.getMonth(), nowdate.getDate());
            var ldobj = this.lunar(sdobj);
            // var cl = '';
            // 农历bb'+(cld[d].isleap?'闰 ':' ')+cld[d].lmonth+' 月 '+cld[d].lday+' 日    
            tt = this.cday(ldobj.month, ldobj.day);
          } else {
            tt = "请传入日期对象";
          }
          return tt;
        }
      }
    }
  },
  methods: {
    getThisMounthDays (year) {
      let date = new Date()
      this.year = year ? year : date.getFullYear(); // 今年
      this.month = date.getMonth() + 1;
      this.domId = `month${this.month}`
      let sys = this.$unip.getSystemInfoSync()
      let isAndroid = sys['system'].indexOf('Android') > 0
      // let day = date.getDate()
      // console.log(this.getnongli.solarday(new Date()), 111111111111)
      // this.thisMounthDays = new Date(this.year, this.month, 0).getDate() // 获得是标准时间,需要getDate()获得天数
      // let myDate = new Date(`${this.year}, ${this.month}, 01`);
      // this.thisMounthFirstDay = myDate.getDay() // 获取这个月第一天是星期几X(0-6,0代表星期天)
      // console.log(this.thisMounthDays, day, this.thisMounthFirstDay)
      // this.alldays = this.thisMounthDays + this.thisMounthFirstDay
      /* 获取今年 所有月份和天数 */
      for (let i = 0; i < 12; i++) {
        this.thisYearDate.push(
          {
            month: i + 1,
            date: {
              all: new Date(this.year, i + 1, 0).getDate(),
              day: (
                () => {
                  let arr = []
                  for (let si = 0; si < new Date(this.year, i + 1, 0).getDate(); si++) {
                    arr.push({
                      day: si + 1,
                      value: new Date(`${this.year}/${i + 1}/${si + 1} 00:00:00`).getTime(),
                      word: `${this.year}-${(i + 1) < 10 ? `0${i + 1}` : i + 1}-${(si + 1) < 10 ? `0${si + 1}` : si + 1}`,
                      nl: this.getnongli.solarday(isAndroid ? new Date(`${this.year}/${i + 1}/${si + 1} 00: 00: 00`) : new Date(`${this.year}-${i + 1}-${si + 1} 00: 00: 00`))
                    })
                  }
                  // console.log(arr)
                  return arr
                }
              )()
            },
            firstDay: new Date(`${this.year}, ${i + 1}, 01`).getDay()
          }
        )
      }
    },
    selectDay (day, word) {
      console.log(day)
      if (this.startDay === '') {
        this.startDay = day
        this.startDayWrod = word
      } else if (this.startDay !== '' && day < this.startDay) {
        this.startDay = day
        this.startDayWrod = word
      } else if (this.startDay !== '' && this.endDay !== '') {
        this.startDay = day
        this.startDayWrod = word
        this.endDay = ''
        this.endDayWrod = ''
      } else if (this.startDay === day) {
        this.startDay = day
        this.startDayWrod = word
        this.endDay = ''
        this.endDayWrod = ''
        this.$uni.showToast({
          title: '开始和结束不能是同一天',
          icon: 'none',
          mask: true
        })
      } else if (this.startDay !== '' && this.endDay === '') {
        if ((day - 31536000000) > this.startDay) {
          this.$uni.showToast({
            title: '不能超过一年',
            icon: 'error',
            mask: true
          })
          return
        }
        this.endDay = day
        this.endDayWrod = word
      }
    },
    getYear (val) {
      val === 1 ? this.year = this.year + 1 : this.year = this.year - 1
      this.thisYearDate = []
      this.getThisMounthDays(this.year)
    },
    sendRangDate () {
      if (this.startDay === '' || this.endDay === '') {
        this.$uni.showToast({
          title: '请选择时间段',
          icon: 'error',
          mask: true
        })
        return
      }
      this.$emit('getDIYRangeDate', {
        'startDay': this.startDay,
        'startDayWrod': this.startDayWrod,
        'endDay': this.endDay,
        'endDayWrod': this.endDayWrod,
      })
    }
  },
  mounted () {
    this.getThisMounthDays()
  }
}
</script>
<style lang="scss" scoped>
@mixin flex ($js){
  display: flex;
  justify-content: $js;
  align-items: center;
}
@mixin word($size, $lh, $weight, $color){
  font-size: $size;
  font-weight: $weight;
  line-height: $lh;
  color: $color;
}

.calander-picker {
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 0;
  width: 100%;
  height: 1134rpx;
  z-index: 999;
  // padding-top: 172rpx;
  background-color: #fff;
  border-radius: 64rpx 64rpx 0 0;
  box-sizing: border-box;
  overflow: hidden;

  .option-bar {
    @include flex(space-between);
    width: 100%;
    height: 108rpx;
    padding: 32rpx 52rpx;
    box-sizing: border-box;

    .option-icon {
      width: 48rpx;
      height: 48rpx;
    }

    .option-title {
      @include word(36rpx, 36rpx, normal, #333);
      font-family: PingFangSCSemibold-, PingFangSCSemibold;
    }
  }

  .year {
    @include flex(space-between);
    width: 100%;
    height: 80rpx;
    // padding: 0 258rpx;
    color: #0046D2;
    background: #F8F8F8;
    box-sizing: border-box;

    .fake-btn {
      display: flex;
      align-items: center;
      width: 270rpx;
      height: 100%;

      .go-icon {
        width: 24rpx;
        height: 48rpx;
      }
    }
  }

  .warining {
    @include flex(flex-start);
    width: 100%;
    height: 64rpx;
    padding: 18rpx 32rpx;
    @include word(26rpx, 26rpx, normal, red);
    background: #FFF1F1;
    box-sizing: border-box;

    .warnning-icon {
      width: 28rpx;
      height: 28rpx;
      margin-right: 8rpx;
    }
  }

  .select-day {
    @include flex(space-between);
    width: 100%;
    height: 80rpx;
    padding: 24rpx 48rpx 28rpx;
    box-sizing: border-box;
    
    .start,
    .end {
      @include flex(space-between);
      width: 50%;
      height: 100%;
      @include word(28rpx, 28rpx, normal, #888)
    }

    .start {
      padding-right: 64rpx;
      border-right: 1px solid #CCCCCC;
      box-sizing: border-box;
    }

    .end {
      padding-left: 64rpx;
      box-sizing: border-box;
    }

    .time-word {
      @include word(28rpx, 28rpx, normal, #0046D2);
    }
  }

  .week {
    @include flex(flex-start);
    width: 100%;
    height: 36rpx;
    background: #F8F8F8;

    .week-day {
      @include flex(center);
      @include word(20rpx, 20rpx, normal, #000);
      width: 14.2%;
      height: 100%;
    }
  }

  .calander-center {
    width: 100%;
    // height: calc(100% - env(safe-area-inset-bottom) - (43rpx * 4));
    height: 772rpx;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: scroll;
  }

  .month {
    @include flex(flex-start);
    flex-wrap: wrap;
    width: 100%;
    padding: 86rpx 25rpx 0;
    box-sizing: border-box;

    .before-day,
    .date {
      position: relative;
      @include flex(flex-start);
      flex-direction: column;
      width: 14.2%;
      height: 140rpx;

      .month-number {
        position: absolute;
        top: -86rpx;
        left: 0;
        @include flex(center);
        width: 100%;
        height: 86rpx;
        color: #000;
      }

      .date-number {
        @include flex(center);
        flex-direction: column;
        width: 100%;
        height: 84rpx;
      }

      .start-day {
        color: #fff;
        border-radius: 43rpx 0 0 43rpx;
        background-color: #0e68b3;
        border-top: 1px solid #666;
      }

      .only-start {
        border-radius: 43rpx;
      }

      .end-day {
        color: #fff;
        border-radius:  0 43rpx 43rpx 0;
        background-color: #0e68b3;
        border-top: 1px solid #666;
      }

      .main-day {
        color: #fff;
        background-color: #0e68b3;
        border-top: 1px solid #666;
      }
    }



    .date {
      border-top: 1px solid #666;
    }
  }
}
</style>
